<template>
	<view class="wrap">
		<view class="item h100 app_flex-aic bw">
			<view class="item-label">可提余额</view>
			<view class="item-content app_flex1">￥{{wallet.balance}}</view>
			<view class="mColor" @click="withdrawAll">全部提现</view>
		</view>
		<view class="item h100 app_flex-aic bw">
			<view class="item-label">提现金额</view>
			<view class="item-content app_flex1">
				<input v-model="amount" type="number" placeholder="请输入提现金额" placeholder-class="app_phc">
			</view>
		</view>
		<view class="gap"></view>
		<view class="item h100 app_flex-aic bw">
			<view class="item-label" style="font-weight: bold;">收款账户</view>
			<!-- <view class="item-content app_flex1">
				<input type="text" placeholder="请输入收款账户" placeholder-class="app_phc">
			</view> -->
		</view>
		<view class="item h100 app_flex-aic bw">
			<view class="item-label">收款人</view>
			<view class="item-content app_flex1">
				<input v-model="payeeName" type="text" placeholder="请输入收款人姓名" placeholder-class="app_phc">
			</view>
		</view>
		<view class="item h100 app_flex-aic bw">
			<view class="item-label">银行卡号</view>
			<view class="item-content app_flex1">
				<input v-model="payAccount" type="number" placeholder="请输入银行卡号" placeholder-class="app_phc">
			</view>
		</view>
		<view class="item h100 app_flex-aic bw">
			<view class="item-label">开户行</view>
			<view class="item-content app_flex1">
				<input v-model="bankName" type="text" placeholder="请输入开户行" placeholder-class="app_phc">
			</view>
		</view>
		<view class="item h100 app_flex-aic bw">
			<view class="item-label">验证码</view>
			<view class="item-content app_flex1">
				<input v-model="code" type="text" placeholder="请输入验证码" placeholder-class="app_phc">
			</view>
			<!-- <view class="mcolor">获取验证码</view> -->
			<view class="codeTap" :class="{active: !getCodeFlag}" @click="sendCode(sPhone)">{{tips}}</view>
		</view>
		<view class="tips">
			<text>请输入</text>
			<text>{{secretPhone}}</text>
			<text>收到的短信验证码</text>
		</view>
		<view class="btn">
			<g-btn title="申请提现" @click="onConfirmTap"></g-btn>
		</view>

		<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange" @end="getCodeFlag = false"
			@start="getCodeFlag = true"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				secretPhone: '',
				wallet: {
					totalIncome: 0,
					withdraw: 0,
					balance: 0,
				},
				amount: '',
				payeeName: '',
				payAccount: '',
				bankName: '',
				code: '',
				seconds: 10,
				tips: '',
				getCodeFlag: false
			}
		},
		onLoad(options) {
			this.$store.dispatch('updateUserInfo').then(userInfo => {
				this.secretPhone = userInfo.tel.slice(0, 3) + '****' + userInfo.tel.slice(7)
				this.phone = userInfo.tel
				this.updatePage()
			})
		},
		methods: {
			updatePage() {
				this.getWalletInfo()
			},
			getWalletInfo() {
				this.$g_api.accountWallet().then(({
					data
				}) => {
					this.wallet = data
				})
			},
			withdrawAll() {
				if (this.wallet.balance == 0) {
					uni.showToast({
						title: '余额不足',
						icon: 'none'
					})
					return
				}
				this.amount = this.wallet.balance
			},
			async checkParams() {
				const {
					amount,
					payeeName,
					payAccount,
					bankName,
					code,
				} = this
				if (!this.amount) return Promise.reject('请输入提现金额')
				if (!this.payeeName) return Promise.reject('请输入收款人姓名')
				if (!this.payAccount) return Promise.reject('请输入银行卡号')
				if (!this.bankName) return Promise.reject('请输入开户行')
				if (!this.code) return Promise.reject('请输入验证码')
				if (!this.gUserInfo.userId || !this.gUserInfo.tel) {
					this.$store.dispatch('updateUserInfo')
					return Promise.reject('未登录')
				}
				return Promise.resolve({
					amount,
					payeeName,
					payAccount,
					bankName,
					checkCode: code,
					currentUserId: this.gUserInfo.userId,
					tel: this.gUserInfo.tel,
					withdrawalType: 1
				})
			},
			async onConfirmTap() {
				try {
					await this.$g_api.accountWithdrawal(await this.checkParams())
					uni.showToast({
						title: '提交成功，待审核',
						icon: 'none'
					})
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.toString(),
						icon: 'none'
					})
				}
			},
			sendCode() {
				if (this.$refs.uCode.canGetCode) {
					this.$g_api.commonSendCode({
						tel: this.gUserInfo.tel,
					}).then(({
						data
					}) => {
						uni.hideLoading();
						uni.showToast({
							title: '验证码已发送'
						})
						this.$refs.uCode.start();
					})
				}
			},
			codeChange(text) {
				this.tips = text;
			},
		}
	}
</script>

<style scoped lang="scss">
	.item {
		padding: 0 30rpx;
		border-bottom: 1px solid $g-border-color;
	}

	.item-label {
		width: 158rpx;
	}

	.item-content {}

	.codeTap {
		color: #999;

		&.active {
			color: $g-main-color;
		}
	}

	.gap {
		width: 100%;
		height: 20rpx;
		background-color: $g-main-bg;
	}

	.tips {
		margin-top: 30rpx;
		padding: 0 30rpx;

		text {
			font-size: 24rpx;
			color: #666;

			&:nth-child(2) {
				color: $g-main-color;
			}
		}
	}

	.btn {
		margin-top: 100rpx;
	}
</style>
